<template>
	<!-- 设置/修改密码 -->
	<view class="content">
		<view class="topTab">
			<uTabs
				:list="itemList"
				lineWidth="20"
				lineColor="#08C8BD"
				:activeStyle="{
					color: '#08C8BD',
					fontWeight: 'bold',
				}"
				:inactiveStyle="{
					color: '#505E5C',
				}"
				itemStyle="width:326rpx; height: 48px;"
				@click="tabClick"
			>
			</uTabs>
		</view>
		<!-- 已设置过密码，则更改密码 -->
		<view class="form" v-if="havePassword">
			<view class="input">
				<span>手机号</span>
				<span>{{phoneNum}}</span>
			</view>
			<view class="input" v-show="changeAccess===0">
				<span>原密码</span>
				<input type="text" placeholder="请输入原密码" maxlength="21"
				placeholder-style="font-size:28rpx;color: #99A3A3;font-weight: 400;">
			</view>
			<view class="input" v-show="changeAccess===1">
				<span>验证码</span>
				<input type="number" v-model="verifyCode" placeholder="请输入验证码" maxlength="6"
				placeholder-style="font-size:28rpx;color: #99A3A3;font-weight: 400;">
				<view :style="verifyCodeSend?'background: #D9D9D9;color: #FFFFFF;':''" @click="sendVerifyCode">获取验证码{{verifyCodeSend?'('+restTime+')':''}}</view>
				
			</view>
			<view class="input">
				<span>新密码</span>
				<input type="text" v-model="newPassword1" placeholder="请输入新密码" maxlength="21"
				placeholder-style="font-size:28rpx;color: #99A3A3;font-weight: 400;">
			</view>
			<view class="input">
				<span>确认新密码</span>
				<input type="text" v-model="newPassword2" placeholder="请输入新密码" maxlength="21"
				placeholder-style="font-size:28rpx;color: #99A3A3;font-weight: 400;">
			</view>
		</view>
		<!-- 未设置过密码，则设置密码 -->
		<view class="form" v-else>
			<view class="input">
				<span>手机号</span>
				<span>{{phoneNum}}</span>
			</view>
			<view class="input">
				<span>设置密码</span>
				<input type="text" v-model="newPassword" placeholder="请输入密码" maxlength="21"
				placeholder-style="font-size:28rpx;color: #99A3A3;font-weight: 400;">
			</view>
		</view>
		
		
		<button @click="submit">提交</button>
		
	</view>
</template>

<script>
	import uTabs from '@/subpageA/uview-ui/components/u-tabs/u-tabs.vue'
	import JSEncrypt from './jsencrypt.js'
	
	export default {
		data() {
			return {
				itemList:[{
					name:'原密码修改',
				},{
					name:'验证码修改'
				}],
				havePassword:false,			//是否已设置密码,false设置密码，true修改密码
				
				changeAccess:0,				//修改密码方式：0-原密码修改 1-验证码修改
				phoneNum:'180****0048',
				
				verifyCode:'',				//验证码
				verifyCodeSend:false,		//验证码是否发送？
				restTime:0,					//重发验证码剩余时间
				
				newPassword:'',				//之前未设置密码，则设置密码
				newPassword1:'',			//更改新密码
				newPassword2:'',			//确认新密码
			}
		},
		components:{
			uTabs
		},
		onLoad(options) {
			console.log(options);
			this.havePassword=options.alreadySetPwd
			this.phoneNum=options.mobile
			if(!this.havePassword){
				//设置新密码
				this.havePassword=false;
				
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title:'设置密码'
				})
			}
		},
		methods: {
			tabClick(name){
				console.log(name);
				if(name.index===0){
					this.changeAccess=0;
				}else{
					this.changeAccess=1;
				}
			},
			sendVerifyCode(){
				//发送验证码
				if(!this.verifyCodeSend){
					this.verifyCodeSend=true;
					this.restTime=60;
					
					let timer=setInterval(()=>{
						this.restTime--;
						if(this.restTime===0){
							this.verifyCodeSend=false;
							clearInterval(timer);
						}
					},1000)
				}
			},
			submit(){
				if(true){
					if(this.newPassword1!=this.newPassword2){
						uni.showToast({
							icon:'error',
							title:'两个新密码不一致',
							
						})
					}else{
						//利用JSEncrypt加密密码(rsa算法)
						let encryptor=new JSEncrypt()
						//公钥
						let pubKey="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAh4C5CzmAtVQIcDaI/UD8uOlkvvX8g+IuQCA1ax+h9fIa9bG148Tq1sXCOujkH9ER+1Oa6hFd2LM0fUeCjUQ3CSR61IGkpA226M2OnqXl8Koa1e6lZkBaSKOLu7sem9aKhnMJpaD389fQ349FLELH42keBpD0wp30RT6QSxjmqkLLbGzgbrCLIs/MCRAxvFiGTUoGk3pHPM6CWDLyvlDwBTFHMSYpLNP3OLBH9sfroX4m0eyAiSSzkneqyozEl8YQyG0T404YfHGUQSaqkwY6lkOFuS83KgM/flFwqkSPDUhoVrtpaqib9GcQsE2rzPA7kK4eFwn1upxzoynNtbHTYQIDAQAB"
						encryptor.setPublicKey(pubKey)//设置公钥
						var rsaPassWord = encryptor.encrypt(this.newPassword)  // 对内容进行加密
						
						this.$store.dispatch('initDic').then(()=>{
							this.$http.request({
								url:'/user/securityManage',
								data:{
									type:1,
									pwd:rsaPassWord
								}
							}).then(result=>{
								let res=result.data
								console.log(res);
								uni.showToast({
									title: res.msg,
									icon:'none'
								})
							})
						})
					}
					
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		
		.topTab{
			background-color: #FFFFFF;
			border-bottom: 1px solid #F3F7F8;
		}
		
		.form{
			background-color: #FFFFFF;
			.input{
				padding: 32rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F3F7F8;
				>span{
					display: inline-block;
					width: 160rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #001A18;
				}
				>span:nth-of-type(2){
					color: #505E5C;
					font-weight: 400;
				}
				>input{
					display: inline-block;
				}
				>view{
					position: absolute;
					right: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding:0 10rpx;
					height: 60rpx;
					background: #08C8BD;
					border-radius: 16rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			color: #FFFFFF;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	
	}
</style>
